<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>模板消息</span>
                </div>
            </div>
            <el-tabs v-model="activeName">
                <el-tab-pane label="订单提醒模板消息" name="1">
                    <div class="ba_f8 mar_20 pad_20">
                        <el-button type="primary" size="medium" @click="yjdy">一键获取模板消息</el-button>
                        <!--                    <el-button type="primary" size="medium" class="">手动添加模板消息</el-button>-->
                        <div class="lh25 mar_t10 msgtext fon_12">
                            温馨提示：1、接单助手公众号必须是已认证服务号，并且微信公众号后台已开通“模板消息”功能（行业类目请选择：IT科技>互联网|电子商务）；<br>
                            2、请将当前服务器ip填写到微信公众号的白名单中；<br>
                           3、每个认证服务号最多可同时启用25个模板ID（公众号相同的模板ID计为1个）；请进入微信公众号后台删除部分不启用的模板。<br>
                            4、此模板消息仅对门店管理员提醒，门店管理员需先绑定微信openId。
                            　　　　
                        </div>
                    </div>
                    <el-form ref="form" :model="form" :rules="rules" label-width="180px" class="mar_t20">
                        <el-form-item label="公众号AppId"  :required="true" prop="appId">
                            <el-input v-model="form.appId" placeholder="请输入公众号AppId"></el-input>
                            <div class="yb_margin lh16">请输入接单助手公众号的AppId</div>
                        </el-form-item>
                        <el-form-item label="公众号AppSecret"  :required="true"  prop="appSecret">
                            <el-input v-model="form.appSecret" placeholder="请输入公众号AppSecret" type="password"></el-input>
                            <div class="yb_margin lh16">请输入接单助手公众号的AppSecret</div>
                        </el-form-item>
                        <el-form-item label="公众号二维码图片" :required="true" prop="icon" >
                            <div class="uploadSource bor_de rel flex curs" v-if="form.icon">

                                <label class="statusLabel curs"  @mouseenter="enter(1)" @mouseleave="leave(1)">
                                    <i class="el-icon-check" ref="imgicon1"></i>
                                    <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                                </label>
                                <img :src="form.icon" @click='test(1)' class="wid"/>
                            </div>
                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                                <i class="el-icon-plus fon_40 color_d9"></i>
                            </div>
                            <div class="yb_margin lh16">请上传接单助手服务号二维码图片</div>

                            <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>

                        </el-form-item>

                        <el-form-item label="管理员公众号OpenId"   prop="openId">
                            <el-input v-model="form.openId" placeholder="请输入管理员公众号OpenId"></el-input>
                            <div class="yb_margin lh16">
                                <p class="color_rb">(该openId仅供接收测试消息和管理员消息,门店可以单独设置openId; 进入门店后台->应用->接单助手进行设置) </p>
                            </div>
                        </el-form-item>
                        <div class="shuju_title mar_b20">
                            <div class="shuju_title_text">
                                <span>新订单通知</span>
                            </div>
                        </div>
                        <el-form-item label="外卖新订单通知">
                            <el-input v-model="form.payOkTid" placeholder="请输入外卖新订单模板ID"></el-input>
                            <!--                        <el-button class="mar_l20"  v-popover:popover3>查看订阅消息示例</el-button>-->
                            <!--                        <el-popover ref="popover3" placement="top-start" title="订单拒绝接单通知" width="250" trigger="hover">-->
                            <!--                            <div class="orderpop fon_12">-->
                            <!--                                <p>您的订单被拒绝接单</p>-->
                            <!--                                <p>订单金额：45.22</p>-->
                            <!--                                <p>订单名称：确认您已获得模板消息</p>-->
                            <!--                                <p>下单时间：2019-08-24 11:45:14</p>-->
                            <!--                                <p>订单状态：已拒单</p>-->
                            <!--                            </div>-->
                            <!--                        </el-popover>-->
                            <el-button class="mar_l20" @click="testTel('payOkTid')">发送测试</el-button>
                        </el-form-item>
                        <el-form-item label="外卖催单通知">
                          <el-input v-model="form.reminderTid" placeholder="请输入外卖催单通知模板ID"></el-input>
                          <el-button class="mar_l20" @click="testTel('reminderTid')">发送测试</el-button>
                        </el-form-item>
                        <el-form-item label="外卖订单退款通知">
                            <el-input v-model="form.refundTid" placeholder="请输入外卖订单退款通知模板ID"></el-input>
                            <el-button class="mar_l20" @click="testTel('refundTid')">发送测试</el-button>
                        </el-form-item>
                        <el-form-item label="当面付订单通知">
                          <el-input v-model="form.cashierTid" placeholder="请输入当面付订单通知模板ID"></el-input>
                          <el-button class="mar_l20" @click="testTel('cashierTid')">发送测试</el-button>
                        </el-form-item>
                        <el-form-item label="堂食开台通知">
                          <el-input v-model="form.inStoreTid" placeholder="请输入堂食开台通知模板ID"></el-input>
                          <el-button class="mar_l20" @click="testTel('inStoreTid')">发送测试</el-button>
                        </el-form-item>
                        <el-form-item label="快餐下单通知">
                          <el-input v-model="form.fastTid" placeholder="请输入快餐下单通知模板ID"></el-input>
                          <el-button class="mar_l20" @click="testTel('fastTid')">发送测试</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {getConfig, postConfig, getStoreTemplates, sendMiniTemplates} from "@/api/setup";
    import attachmentImg from "@/plugins/attachment-img";

    export default {
        created() {
            this.bus.$emit('loading', true);
            this.init();
        },
        components: {attachmentImg,},
        data() {

            return {
                activeName: '1',
                form: {
                    appId: '',
                    appSecret: '',
                    icon:'',
                    openId: '',
                    payOkTid: '',
                    refundTid:'',
                    cashierTid:'',
                    inStoreTid:'',
                    reminderTid:'',
                    fastTid:'',

                },
                rules: {
                    appId: [
                        {required: true, message: '请输入公众号AppId', trigger: 'blur'},
                    ],
                    appSecret: [
                        {required: true, message: '请输入公众号AppSecret', trigger: 'blur'},
                    ],
                    icon: [
                        {required: true, message: '请上传公众号二维码图片', trigger: 'blur'},
                    ],
                    // openId: [
                    //     {required: true, message: '请输入管理员公众号OpenId', trigger: 'blur'}
                    // ],

                },
                dialogTableVisible4: false,
            }
        },
        methods: {
            async init() {
                const {data} = await getConfig({ident: 'storeTemplates'});
                if(data.icon){
                    this.form = Object.assign({}, data);
                }
                this.bus.$emit('loading', false)
            },
            async yjdy() {
                const {msg} = await getStoreTemplates();
                this.$baseMessage(msg, "success");
                this.init();
            },
            async testTel(type) {
                const {msg} = await sendMiniTemplates({type});
                this.$baseMessage(msg, "success");
                this.init();
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                // console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str

            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form.icon.remove(item);
                            break
                    }
                } else {

                    switch (index) {

                        case 1:
                            this.form.icon = '';
                            break
                    }
                }

            },
            submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.ident = 'storeTemplates'
                        this.form.identName = '订单提醒模板消息'
                        const {msg} = await postConfig(this.form);
                        this.$baseMessage(msg, "success");
                        this.init();
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style>
    .orderpop p {
        line-height: 24px;
    }

    .msgtext {
        text-indent: -61px;
        padding-left: 70px;
    }
</style>
